<template>
	<scroll-view :scroll-y="true" class="my_box">
		<view class="my_box_content">

			<view class="userInfoBox">

				<view class="avatarBox">
					<button v-if="token" class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"
						style="height: 100rpx;width: 100rpx;"></button>
					<u-avatar :src="userInfo.avatar" shape="square" size='100rpx'></u-avatar>
				</view>
				<view @click='login'>
					<view v-if="token">
						<input type="nickname" :disabled="userInfo.is_set_nickname" v-model="nick_name" @blur='nameBlur' @change='change'/>
					</view>
					<view v-else>
						未登录请先登录
					</view>
					<view v-if="token">
						<u-text :lines='1' size='24rpx' :text='`手机号：${userInfo.mobile}`'></u-text>
					</view>
				</view>
			</view>

			<view class="worksBox">
				<view v-for="item in list" :key="item" @click="jump(item)">
					{{item}}
				</view>
			</view>
		<!-- 	<view v-if='token' class="loginOut"><u-button color=" #3975c6" text="退出登录" @click="loginOut"></u-button>
			</view> -->
		</view>
	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
				list: [
					'我的审核',
					'我的工地',
					'工艺流程',
					'我的动态',
					'公司编辑'
				],
				token: '',
				nick_name:''
			}
		},
		mounted() {
			this.token = uni.getStorageSync('token')
			this.userInfo = uni.getStorageSync('user')
			this.nick_name=this.userInfo.nick_name
		},
		methods: {
			change(e){
				this.nick_name=e.detail.value
			},
			nameBlur(e) {
				setTimeout(() => {
					uni.setStorageSync('user', {
						...this.userInfo,
						nick_name: this.nick_name,
						is_set_nickname: 1
					});
					this.userInfo = {
						...this.userInfo,
						nick_name: this.nick_name,
						is_set_nickname: 1
					}
					this.$api_company.Edit.Nickname({
						nick_name: this.nick_name
					})
				}, 1000)
			},
			onChooseAvatar(e) {
				const {
					avatarUrl
				} = e.detail;
				uni.uploadFile({
					url: this.$config.url + '/api/my/detail/avatar/upload', // 仅为示例，非真实的接口地址
					filePath: avatarUrl,
					name: 'file',
					header: {
						'Content-Type': 'application/json;charset=UTF-8',
						'Authorization': "Bearer " + this.token
					},
				});
				uni.setStorageSync('user', {
					...this.userInfo,
					avatar: avatarUrl,
					is_set_avatar: 1
				});
				this.userInfo = {
					...this.userInfo,
					avatar: avatarUrl,
					is_set_avatar: 1
				}
			},
			loginOut() {
				uni.setStorageSync('token', null);
				uni.setStorageSync('user', null);
				this.userInfo = {}
				this.token = null
			},
			jump(item) {
				if (item == '工艺流程') {
					this.$utils.navigateTo({
						url: '/process/list'
					})
				} else if (item == '我的工地') {
					this.$utils.navigateTo({
						url: '/My/decorate_company'
					})
				} else if (item == '我的审核') {
					this.$utils.navigateTo({
						url: '/authorizer/list'
					})
				} else if (item == '我的动态') {
					this.$utils.navigateTo({
						url: '/My/active'
					})
				} else if (item == '公司编辑') {
					this.$utils.navigateTo({
						url: '/shop/update'
					})
				}
			},
			login() {
				if (this.token) return
				uni.reLaunch({
					url: '/login/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.loginOut {
		margin-top: 40rpx;
		height: 40rpx;
		overflow: hidden;
	}

	.my_box {
		height: 100%;

		.my_box_content {
			background: #fff;
			margin: 40rpx;
			border-radius: 8rpx;
			box-shadow: 0 0 10rpx #ddd;
			padding: 20rpx;
		}

		.userInfoBox {
			display: flex;

			>view:nth-child(2) {
				margin-left: 10px;
				flex: 1;
				display: flex;
				height: 100rpx;
				flex-direction: column;
				justify-content: space-between;
			}
		}

		.worksBox {
			padding: 20rpx 0;
			font-size: 24rpx;

			>view {
				cursor: pointer;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 0;
				border-bottom: 1px solid rgba(#000, 0.1);

			}
		}

		.loginOut {
			/* width: 90%; */
			display: flex;
			align-items: center;
			background: #3975c6;
			/* justify-content: space-between; */
			padding: 10rpx;
			font-size: 30rpx;
			border: 1px solid #eee;
			border-radius: 8rpx;
			justify-content: center;
			color: #fff;
		}

	}

	.avatarBox {
		position: relative;

		.avatar-wrapper {
			opacity: 0;
			position: absolute;
			z-index: 5;
			width: 100%;
			height: 100%;
		}
	}
</style>